import React, { useState, useEffect } from 'react';
import { Input, Select, Button, Pagination, Spin, Empty, message, Card, Row, Col, Tag, Breadcrumb, Space, Skeleton } from 'antd';
import { useError } from '../../components/ui/ErrorHandler';
import { useLoading } from '../../components/ui/LoadingManager';
import { 
  SearchOutlined, 
  FilterOutlined, 
  PhoneOutlined, 
  AppstoreOutlined,
  UnorderedListOutlined,
  HomeOutlined,
  EyeOutlined,
  CheckCircleOutlined,
  TrophyOutlined,
  HeartOutlined,
  ShareAltOutlined,
  StarFilled,
  ProjectOutlined
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import ContactModal from '../../components/ui/ContactModal';
import BackToTop from '../../components/ui/BackToTop';
import { toast } from 'sonner';
import { caseApi } from '../../services/api';
import { Case } from '../../types';

const { Search } = Input;
const { Option } = Select;

// 添加CSS样式
const styles = `
  .pagination-enhanced .ant-pagination-item {
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    margin: 0 4px;
    transition: all 0.2s;
  }
  
  .pagination-enhanced .ant-pagination-item-active {
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    border-color: #3b82f6;
  }
  
  .pagination-enhanced .ant-pagination-item-active a {
    color: white;
  }
  
  .pagination-enhanced .ant-pagination-prev,
  .pagination-enhanced .ant-pagination-next {
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    transition: all 0.2s;
  }
  
  .pagination-enhanced .ant-pagination-prev:hover,
  .pagination-enhanced .ant-pagination-next:hover {
    border-color: #3b82f6;
  }
  
  .pagination-enhanced .ant-pagination-item:hover {
    border-color: #3b82f6;
    transform: translateY(-1px);
  }
`;

// 注入样式
if (typeof document !== 'undefined') {
  const styleElement = document.createElement('style');
  styleElement.textContent = styles;
  document.head.appendChild(styleElement);
}

interface CaseFilters {
  search: string;
  category: string;
  tags: string[];
  location: string;
  year: string;
}

// 案例分类选项（映射英文ID到中文名称）
const CASE_CATEGORIES = [
  // 英文ID映射
  { value: 'shopping-mall', label: '商业地产' },
  { value: 'corporate', label: '企业形象' },
  { value: 'restaurant', label: '餐饮行业' },
  { value: 'retail', label: '零售行业' },
  { value: 'education', label: '教育培训' },
  { value: 'healthcare', label: '医疗健康' },
  { value: 'finance', label: '金融服务' },
  { value: 'real-estate', label: '房地产' },
  { value: 'automotive', label: '汽车服务' },
  { value: 'manufacturing', label: '制造业' },
  { value: 'government', label: '政府机构' },
  { value: 'entertainment', label: '文化娱乐' },
  { value: 'technology', label: '科技企业' },
  { value: 'hotel', label: '酒店行业' },
  { value: 'beauty', label: '美容美发' },
  // 中文名称兼容（向后兼容）
  { value: '餐饮行业', label: '餐饮行业' },
  { value: '零售行业', label: '零售行业' },
  { value: '教育培训', label: '教育培训' },
  { value: '医疗健康', label: '医疗健康' },
  { value: '金融服务', label: '金融服务' },
  { value: '房地产', label: '房地产' },
  { value: '汽车服务', label: '汽车服务' },
  { value: '制造业', label: '制造业' },
  { value: '政府机构', label: '政府机构' },
  { value: '文化娱乐', label: '文化娱乐' }
];

// 地区选项
const LOCATION_OPTIONS = [
  { label: '北京', value: '北京' },
  { label: '上海', value: '上海' },
  { label: '广州', value: '广州' },
  { label: '深圳', value: '深圳' },
  { label: '杭州', value: '杭州' },
  { label: '成都', value: '成都' },
  { label: '武汉', value: '武汉' },
  { label: '西安', value: '西安' }
];

// 年份选项
const YEAR_OPTIONS = [
  { label: '2024年', value: '2024' },
  { label: '2023年', value: '2023' },
  { label: '2022年', value: '2022' },
  { label: '2021年', value: '2021' },
  { label: '2020年', value: '2020' }
];

const CasePage: React.FC = () => {
  const navigate = useNavigate();
  const { showError } = useError();
  const { withLoading } = useLoading();
  const [cases, setCases] = useState<Case[]>([]);
  const [loading, setLoading] = useState(false);
  const [pagination, setPagination] = useState({
    page: 1,
    limit: 12,
    total: 0
  });
  const [contactModalOpen, setContactModalOpen] = useState(false);
  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
  
  const [filters, setFilters] = useState<CaseFilters>({
    search: '',
    category: '',
    tags: [],
    location: '',
    year: ''
  });

  useEffect(() => {
    handleSearch();
  }, []);

  const fetchCases = async (params: any) => {
    try {
      setLoading(true);
      console.log('fetchCases params:', params);
      const response = await withLoading(
        caseApi.getCases(params),
        '正在加载案例列表...'
      );
      
      console.log('API response:', response);
      console.log('Cases data:', response.cases);
      console.log('Total count:', response.total);
      
      setCases(response.cases || []);
      setPagination({
        page: params.current || 1,
        limit: params.pageSize || 12,
        total: response.total || 0
      });
    } catch (error) {
      console.error('获取案例列表失败:', error);
      showError(error instanceof Error ? error : '获取案例列表失败', {
        modal: false,
        details: '请检查网络连接或稍后重试'
      });
      // 设置空数组作为后备
      setCases([]);
      setPagination({
        page: 1,
        limit: 12,
        total: 0
      });
    } finally {
      setLoading(false);
    }
  };

  const handleSearch = () => {
    const searchParams: any = {
      current: 1,
      pageSize: 12,
      status: 'published'
    };

    if (filters.search) {
      searchParams.search = filters.search;
    }
    if (filters.category) {
      searchParams.category = filters.category;
    }
    if (filters.location) {
      searchParams.location = filters.location;
    }
    if (filters.year) {
      searchParams.year = filters.year;
    }
    if (filters.tags.length > 0) {
      searchParams.tags = filters.tags;
    }

    fetchCases(searchParams);
  };

  const handleFilterChange = (key: keyof CaseFilters, value: any) => {
    setFilters(prev => ({
      ...prev,
      [key]: value
    }));
  };

  const handlePageChange = (page: number) => {
    const searchParams: any = {
      current: page,
      pageSize: 12,
      status: 'published'
    };

    if (filters.search) searchParams.search = filters.search;
    if (filters.category) searchParams.category = filters.category;
    if (filters.location) searchParams.location = filters.location;
    if (filters.year) searchParams.year = filters.year;
    if (filters.tags.length > 0) searchParams.tags = filters.tags;

    fetchCases(searchParams);
  };

  const clearFilters = () => {
    setFilters({
      search: '',
      category: '',
      tags: [],
      location: '',
      year: ''
    });
    fetchCases({ current: 1, pageSize: 12, status: 'published' });
  };

  const getCategoryLabel = (category: string) => {
    // 如果分类本身就是中文名称，直接返回
    if (category && /[\u4e00-\u9fa5]/.test(category)) {
      return category;
    }
    // 否则尝试从映射表中查找
    const categoryOption = CASE_CATEGORIES.find(c => c.value === category);
    return categoryOption?.label || category;
  };

  const getCategoryColor = (category: string) => {
    // 为不同分类提供不同的背景颜色
    const colorMap: { [key: string]: string } = {
      'shopping-mall': 'bg-gradient-to-r from-blue-500 to-blue-600',
      'corporate': 'bg-gradient-to-r from-gray-600 to-gray-700',
      'restaurant': 'bg-gradient-to-r from-orange-500 to-red-500',
      'retail': 'bg-gradient-to-r from-green-500 to-emerald-500',
      'education': 'bg-gradient-to-r from-indigo-500 to-purple-500',
      'healthcare': 'bg-gradient-to-r from-teal-500 to-cyan-500',
      'finance': 'bg-gradient-to-r from-yellow-500 to-amber-500',
      'real-estate': 'bg-gradient-to-r from-stone-500 to-neutral-600',
      'automotive': 'bg-gradient-to-r from-slate-600 to-gray-700',
      'manufacturing': 'bg-gradient-to-r from-zinc-500 to-stone-600',
      'government': 'bg-gradient-to-r from-red-600 to-rose-600',
      'entertainment': 'bg-gradient-to-r from-pink-500 to-rose-500',
      'technology': 'bg-gradient-to-r from-violet-500 to-purple-600',
      'hotel': 'bg-gradient-to-r from-amber-500 to-orange-500',
      'beauty': 'bg-gradient-to-r from-fuchsia-500 to-pink-500',
      // 中文分类的颜色映射
      '餐饮行业': 'bg-gradient-to-r from-orange-500 to-red-500',
      '零售行业': 'bg-gradient-to-r from-green-500 to-emerald-500',
      '教育培训': 'bg-gradient-to-r from-indigo-500 to-purple-500',
      '医疗健康': 'bg-gradient-to-r from-teal-500 to-cyan-500',
      '金融服务': 'bg-gradient-to-r from-yellow-500 to-amber-500',
      '房地产': 'bg-gradient-to-r from-stone-500 to-neutral-600',
      '汽车服务': 'bg-gradient-to-r from-slate-600 to-gray-700',
      '制造业': 'bg-gradient-to-r from-zinc-500 to-stone-600',
      '政府机构': 'bg-gradient-to-r from-red-600 to-rose-600',
      '文化娱乐': 'bg-gradient-to-r from-pink-500 to-rose-500'
    };
    return colorMap[category] || 'bg-gradient-to-r from-purple-500 to-purple-600';
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-blue-50 to-purple-50">
      {/* Hero区域 */}
      <div className="relative bg-gradient-to-br from-purple-600 via-purple-700 to-purple-800 text-white py-8 sm:py-12 md:py-16">
        <div className="absolute inset-0 bg-black/20"></div>
        <div className="absolute inset-0" style={{
          backgroundImage: `url('/images/case_bg.jpg')`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          opacity: 0.3
        }}></div>
        <div className="container mx-auto px-3 sm:px-4 relative z-10">
          <div className="text-center mb-6 sm:mb-8">
            <h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-6xl font-bold mb-3 sm:mb-4 bg-gradient-to-r from-white via-purple-100 to-blue-100 bg-clip-text text-transparent drop-shadow-lg">成功案例</h1>
            <p className="text-sm sm:text-base md:text-lg lg:text-xl text-purple-100 max-w-2xl mx-auto px-4">展示我们的专业实力，见证品质与创新的完美结合</p>
          </div>
          
          {/* 面包屑导航 */}
          <div className="flex justify-center">
            <Breadcrumb
              separator={<span className="text-purple-200">/</span>}
              items={[
                {
                  href: '/',
                  title: (
                    <div className="flex items-center gap-1 text-purple-200 hover:text-white">
                      <HomeOutlined />
                      <span>首页</span>
                    </div>
                  ),
                },
                {
                  title: (
                    <div className="flex items-center gap-1 text-white">
                      <ProjectOutlined />
                      <span>合作案例</span>
                    </div>
                  ),
                },
              ]}
            />
          </div>
        </div>
      </div>

      <div className="container mx-auto px-3 sm:px-4 py-4 sm:py-6 md:py-8">
        {/* 搜索和筛选区域 */}
        <div className="bg-white rounded-lg shadow-sm overflow-hidden mb-6 sm:mb-8">
          <div className="bg-gradient-to-r from-purple-50 to-blue-50 px-4 sm:px-6 py-3 sm:py-4 border-b">
            <h2 className="text-lg sm:text-xl font-semibold text-gray-900 flex items-center gap-2 sm:gap-3">
              <FilterOutlined className="text-purple-500 text-base sm:text-lg" />
              案例筛选
            </h2>
            <p className="text-sm sm:text-base text-gray-600 mt-1">快速找到您感兴趣的案例</p>
          </div>
          
          <div className="p-4 sm:p-6">
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-3 sm:gap-4">
              {/* 搜索框 */}
              <div className="sm:col-span-2 xl:col-span-2">
                <Search
                  placeholder="搜索案例标题或描述"
                  value={filters.search}
                  onChange={(e) => handleFilterChange('search', e.target.value)}
                  onSearch={handleSearch}
                  enterButton={<SearchOutlined />}
                  size="large"
                  className="hover:shadow-md transition-shadow"
                />
              </div>

              {/* 案例分类筛选 */}
              <Select
                placeholder="案例分类"
                value={filters.category || ''}
                onChange={(value) => handleFilterChange('category', value)}
                size="large"
                allowClear
                className="hover:shadow-md transition-shadow"
              >
                {CASE_CATEGORIES.map(category => (
                  <Option key={category.value} value={category.value}>{category.label}</Option>
                ))}
              </Select>

              {/* 地区筛选 */}
              <Select
                placeholder="项目地区"
                value={filters.location || ''}
                onChange={(value) => handleFilterChange('location', value)}
                size="large"
                allowClear
                className="hover:shadow-md transition-shadow"
              >
                {LOCATION_OPTIONS.map(location => (
                  <Option key={location.value} value={location.value}>{location.label}</Option>
                ))}
              </Select>

              {/* 年份筛选 */}
              <Select
                placeholder="完成年份"
                value={filters.year || ''}
                onChange={(value) => handleFilterChange('year', value)}
                size="large"
                allowClear
                className="hover:shadow-md transition-shadow"
              >
                {YEAR_OPTIONS.map(year => (
                  <Option key={year.value} value={year.value}>{year.label}</Option>
                ))}
              </Select>
            </div>

            {/* 操作按钮 */}
            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mt-4 sm:mt-6 gap-3 sm:gap-4">
              <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 sm:gap-4">
                <Button
                  type="primary"
                  icon={<SearchOutlined />}
                  onClick={handleSearch}
                  size="large"
                  className="bg-purple-600 hover:bg-purple-700 border-0 shadow-md"
                >
                  搜索
                </Button>
                <Button
                  onClick={clearFilters}
                  size="large"
                  className="border-gray-300 hover:border-purple-300 hover:text-purple-600"
                >
                  清除筛选
                </Button>
              </div>
              
              {/* 视图切换 */}
              <div className="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-2">
                <div className="flex items-center justify-between sm:justify-start gap-2">
                  <span className="text-gray-600 text-sm">视图模式：</span>
                  <Button.Group>
                    <Button
                      type={viewMode === 'grid' ? 'primary' : 'default'}
                      icon={<AppstoreOutlined />}
                      onClick={() => setViewMode('grid')}
                      className={viewMode === 'grid' ? 'bg-purple-600 border-purple-600' : ''}
                      size="small"
                    >
                      <span className="hidden sm:inline">网格</span>
                    </Button>
                    <Button
                      type={viewMode === 'list' ? 'primary' : 'default'}
                      icon={<UnorderedListOutlined />}
                      onClick={() => setViewMode('list')}
                      className={viewMode === 'list' ? 'bg-purple-600 border-purple-600' : ''}
                      size="small"
                    >
                      <span className="hidden sm:inline">列表</span>
                    </Button>
                  </Button.Group>
                </div>
                <span className="text-gray-500 text-xs sm:text-sm text-center sm:text-left">共找到 {pagination.total} 个案例</span>
              </div>
            </div>
          </div>
        </div>

        {/* 案例列表 */}
        {loading ? (
          <div className={viewMode === 'grid' ? 
            "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6 mb-6 sm:mb-8" : 
            "space-y-3 sm:space-y-4 mb-6 sm:mb-8"
          }>
            {Array.from({ length: 12 }).map((_, index) => (
              <Card key={index} className="overflow-hidden">
                <Skeleton.Image className="w-full h-32 sm:h-48" active />
                <div className="p-3 sm:p-4">
                  <Skeleton active paragraph={{ rows: 3 }} />
                </div>
              </Card>
            ))}
          </div>
        ) : cases.length === 0 ? (
          <div className="bg-white rounded-lg shadow-sm p-8 sm:p-12">
            <Empty
              description="暂无案例数据"
              image={Empty.PRESENTED_IMAGE_SIMPLE}
            />
          </div>
        ) : (
          <>
            <div className={viewMode === 'grid' ? 
              "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6 mb-6 sm:mb-8" : 
              "space-y-3 sm:space-y-4 mb-6 sm:mb-8"
            }>
              {cases.map((caseItem) => (
                viewMode === 'grid' ? (
                  <Card
                    key={caseItem.id}
                    hoverable
                    className="overflow-hidden group transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border-0 shadow-md cursor-pointer h-auto flex flex-col"
                    onClick={() => navigate(`/cases/${caseItem.id}`)}
                    styles={{ body: { padding: 0, display: 'flex', flexDirection: 'column' } }}
                  >
                    {/* 图片区域 - 严格16:9比例 */}
                    <div className="relative" style={{ aspectRatio: '16/9' }}>
                      <img
                        src={caseItem.images?.[0] || `https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=${encodeURIComponent(`professional ${caseItem.title} advertising project case study`)}&image_size=landscape_16_9`}
                        alt={caseItem.title}
                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                        onError={(e) => {
                          e.currentTarget.src = '/placeholder-case.jpg';
                        }}
                      />
                      
                      {/* 分类标签 - 右上角 */}
                      <div className="absolute top-3 right-3">
                        <Tag className={`text-sm border-0 text-white font-medium shadow-lg px-3 py-1.5 rounded-lg ${
                          getCategoryColor(caseItem.category)
                        }`}>
                          {getCategoryLabel(caseItem.category)}
                        </Tag>
                      </div>
                    </div>
                    
                    {/* 内容区域 - 重新设计 */}
                    <div className="p-3 sm:p-4 flex flex-col">
                      <h3 className="font-bold text-gray-900 line-clamp-2 mb-2 sm:mb-3 text-sm sm:text-base leading-tight hover:text-purple-600 transition-colors">{caseItem.title}</h3>
                      
                      <p className="text-gray-600 text-xs sm:text-sm line-clamp-3 mb-3 sm:mb-4 leading-relaxed">{caseItem.description}</p>
                      
                      {/* 项目信息 */}
                      <div className="space-y-1 sm:space-y-2">
                        <div className="flex items-center gap-1 sm:gap-2">
                          <span className="text-gray-500 text-xs sm:text-sm">客户：</span>
                          <span className="text-gray-700 font-medium text-xs sm:text-sm truncate">{caseItem.client}</span>
                        </div>
                        <div className="flex items-center gap-1 sm:gap-2">
                          <span className="text-gray-500 text-xs sm:text-sm">地区：</span>
                          <span className="text-gray-700 font-medium text-xs sm:text-sm">{caseItem.location}</span>
                        </div>
                      </div>
                      
                      {/* 标签区域 */}
                      {caseItem.tags && caseItem.tags.length > 0 && (
                        <div className="flex flex-wrap gap-1 sm:gap-2 mt-2 sm:mt-3">
                          {caseItem.tags.slice(0, 3).map((tag, index) => (
                            <span key={index} className="inline-block bg-gray-100 text-gray-600 text-xs px-2 sm:px-3 py-1 rounded-full font-medium">
                              {typeof tag === 'string' ? tag : (tag as any)?.name || tag}
                            </span>
                          ))}
                        </div>
                      )}
                    </div>
                  </Card>
                ) : (
                  <Card
                    key={caseItem.id}
                    hoverable
                    className="overflow-hidden group transition-all duration-300 hover:shadow-xl border-0 shadow-md cursor-pointer"
                    onClick={() => navigate(`/cases/${caseItem.id}`)}
                  >
                    <Row gutter={16} align="middle">
                      <Col xs={24} sm={8} md={6}>
                        <div className="aspect-[16/9] overflow-hidden rounded-lg relative bg-gradient-to-br from-gray-100 to-gray-200">
                          <img
                            src={caseItem.images?.[0] || `https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=${encodeURIComponent(`professional ${caseItem.title} advertising project case study`)}&image_size=landscape_16_9`}
                            alt={caseItem.title}
                            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                            onError={(e) => {
                              e.currentTarget.src = '/placeholder-case.jpg';
                            }}
                          />
                          {caseItem.featured && (
                            <div className="absolute top-2 left-2">
                              <div className="bg-gradient-to-r from-orange-500 to-red-500 text-white px-2 py-1 rounded-full text-xs font-medium flex items-center gap-1">
                                <StarFilled />精选
                              </div>
                            </div>
                          )}
                        </div>
                      </Col>
                      <Col xs={24} sm={16} md={18}>
                        <div className="flex flex-col h-full justify-between p-3 sm:p-4">
                          <div>
                            <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between mb-2 sm:mb-3 gap-2">
                              <h3 className="text-base sm:text-lg md:text-xl font-semibold text-gray-900 line-clamp-2 flex-1">{caseItem.title}</h3>
                              <div className="text-left sm:text-right flex-shrink-0">
                                <div className="text-sm sm:text-base md:text-lg font-bold text-purple-600">
                                  {caseItem.projectValue}
                                </div>
                                <div className="text-xs sm:text-sm text-gray-500">{caseItem.completedAt}</div>
                              </div>
                            </div>
                            <p className="text-sm sm:text-base text-gray-600 mb-2 sm:mb-3 line-clamp-2 leading-relaxed">{caseItem.description}</p>
                            <div className="mb-2 sm:mb-3 flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
                              <Tag className={`border-0 text-white font-medium text-xs sm:text-sm ${
                                getCategoryColor(caseItem.category)
                              }`}>
                                {getCategoryLabel(caseItem.category)}
                              </Tag>
                              <div className="flex flex-col sm:flex-row gap-1 sm:gap-4">
                                <span className="text-xs sm:text-sm text-gray-500">客户：{caseItem.client}</span>
                                <span className="text-xs sm:text-sm text-gray-500">地区：{caseItem.location}</span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </Col>
                    </Row>
                  </Card>
                )
              ))}
            </div>

            {/* 分页 */}
            {pagination.total > pagination.limit && (
              <div className="flex justify-center mb-8 sm:mb-12">
                <div className="bg-white rounded-xl shadow-sm p-4 sm:p-6 border border-gray-100 w-full sm:w-auto">
                  <Pagination
                    current={pagination.page}
                    total={pagination.total}
                    pageSize={pagination.limit}
                    onChange={handlePageChange}
                    showSizeChanger={false}
                    showQuickJumper={window.innerWidth > 640}
                    showTotal={(total, range) => (
                      <div className="text-center mb-3 sm:mb-4">
                        <span className="text-gray-600 text-sm sm:text-base">
                          显示第 <span className="font-semibold text-purple-600">{range[0]}-{range[1]}</span> 条，
                          共 <span className="font-semibold text-purple-600">{total}</span> 条案例
                        </span>
                      </div>
                    )}
                    className="pagination-enhanced"
                    size={window.innerWidth < 640 ? 'small' : 'default'}
                  />
                </div>
              </div>
            )}
          </>
        )}

        {/* CTA区域 */}
        <div className="bg-gradient-to-r from-purple-50 to-blue-50 p-6 sm:p-8 md:p-12 text-center rounded-2xl mt-8 sm:mt-12 mb-6 sm:mb-8">
          <div className="max-w-4xl mx-auto">
            <div className="flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-3 mb-4 sm:mb-6">
              <div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full flex items-center justify-center">
                <TrophyOutlined className="text-white text-lg sm:text-xl" />
              </div>
              <h2 className="text-xl sm:text-2xl md:text-3xl font-bold text-gray-900">想要打造类似的成功案例？</h2>
            </div>
            <p className="text-base sm:text-lg md:text-xl text-gray-600 mb-6 sm:mb-8 leading-relaxed max-w-2xl mx-auto px-4">
              我们拥有丰富的项目经验和专业的设计团队，
              将为您量身定制最适合的广告解决方案
            </p>
            
            {/* 服务亮点 */}
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6 mb-6 sm:mb-8">
              <div className="bg-white rounded-xl p-4 sm:p-6 shadow-sm border border-gray-100">
                <div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-r from-green-500 to-blue-500 rounded-full flex items-center justify-center mx-auto mb-3 sm:mb-4">
                  <CheckCircleOutlined className="text-white text-lg sm:text-xl" />
                </div>
                <h3 className="font-semibold text-gray-900 mb-1 sm:mb-2 text-sm sm:text-base">专业设计</h3>
                <p className="text-gray-600 text-xs sm:text-sm">资深设计师团队</p>
              </div>
              <div className="bg-white rounded-xl p-4 sm:p-6 shadow-sm border border-gray-100">
                <div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center mx-auto mb-3 sm:mb-4">
                  <TrophyOutlined className="text-white text-lg sm:text-xl" />
                </div>
                <h3 className="font-semibold text-gray-900 mb-1 sm:mb-2 text-sm sm:text-base">品质保证</h3>
                <p className="text-gray-600 text-xs sm:text-sm">严格质量控制</p>
              </div>
              <div className="bg-white rounded-xl p-4 sm:p-6 shadow-sm border border-gray-100">
                <div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center mx-auto mb-3 sm:mb-4">
                  <StarFilled className="text-white text-lg sm:text-xl" />
                </div>
                <h3 className="font-semibold text-gray-900 mb-1 sm:mb-2 text-sm sm:text-base">贴心服务</h3>
                <p className="text-gray-600 text-xs sm:text-sm">全程跟踪服务</p>
              </div>
            </div>
            
            <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center">
              <Button
                type="primary"
                size={window.innerWidth < 640 ? 'middle' : 'large'}
                icon={<PhoneOutlined />}
                className="bg-purple-600 hover:bg-purple-700 border-0 text-white font-semibold px-6 sm:px-8 py-2 sm:py-3 h-auto shadow-lg text-sm sm:text-base"
                onClick={() => setContactModalOpen(true)}
              >
                立即联系我们
              </Button>
              <Button
                size={window.innerWidth < 640 ? 'middle' : 'large'}
                className="border-purple-200 text-purple-600 hover:bg-purple-50 font-semibold px-6 sm:px-8 py-2 sm:py-3 h-auto text-sm sm:text-base"
                onClick={() => navigate('/products')}
              >
                查看产品中心
              </Button>
            </div>
          </div>
        </div>
      </div>

      {/* 联系模态框 */}
      <ContactModal
        open={contactModalOpen}
        onClose={() => setContactModalOpen(false)}
      />

      {/* 返回顶部 */}
      <BackToTop />
    </div>
  );
};

export default CasePage;